<template>
  <div class="wrap" v-if="isShowAlarmTime">
    <datetime-view
      v-model="remindInfo.remindTime"
      class="datetime"
      ref="datetime"
      format="HH:mm"
    ></datetime-view>
    <group class="textDescription">
      <cell
        title="重复"
        is-link
        @click.native="isShowChecker = !isShowChecker"
      ></cell>
      <checker
        class="checker"
        v-model="remindInfo.remindDays"
        type="checkbox"
        default-item-class="item"
        selected-item-class="item-selected"
      >
        <checker-item
          :value="item.key"
          v-for="item in replayOptions"
          :key="item.key"
          >{{ item.value }}</checker-item
        >
      </checker>
    </group>
    <div class="button-time">
      <x-button type="default" class="cancelButton" @click.native="cancel"
        >取消</x-button
      >
      <x-button type="primary" class="confirmButton" @click.native="submit"
        >确认</x-button
      >
    </div>
  </div>
</template>

<script>
import { DatetimeView, Group, Cell, Checker, CheckerItem, XButton } from "vux";
export default {
  components: {
    DatetimeView,
    Group,
    Cell,
    Checker,
    CheckerItem,
    XButton,
  },
  props: {
    isShowAlarmTime: Boolean,
    isRemind: Boolean,
    remindInfo: {
      type: Object,
      default: [1],
    },
  },
  data() {
    return {
      isShowChecker: false,
      replayOptions: [
        {
          key: 1,
          value: "周一",
        },
        {
          key: 2,
          value: "周二",
        },
        {
          key: 3,
          value: "周三",
        },
        {
          key: 4,
          value: "周四",
        },
        {
          key: 5,
          value: "周五",
        },
        {
          key: 6,
          value: "周六",
        },
        {
          key: 7,
          value: "周天",
        },
      ],
      isShowNote: true,
    };
  },
  mounted() {
    if (this.remindInfo.remindTime === "") {
      this.remindInfo.remindTime = "09:00";
    }
    if (this.remindInfo.remindDays.length === 0) {
      this.remindInfo.remindDays.push(1);
    }
  },
  methods: {
    cancel() {
      this.isShowAlarmTime = false;
      this.$emit("update:isShowAlarmTime", false);
    },
    submit() {
      this.isShowAlarmTime = false;
      this.$emit("getPickedReplayTime", [this.remindInfo, false, true]);
    },
  },
};
</script>

<style lang='less' scoped>
.wrap {
  width: 100%;
  height: 100%;
  margin-top: 50px;
  background: white;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 500;
  .datetime {
    display: block;
    width: 100%;
    max-height: 50%;
    overflow: auto;
  }
  .textDescription {
    font-size: 16px;
    .checker {
      padding: 0 15px;
      .item {
        border: 1px solid #ececec;
        padding: 5px 15px;
      }
      .item-selected {
        border: 1px solid green;
      }
    }
  }
  .button-time {
    margin-top: 15px;
    margin-left: 5%;
    .cancelButton {
      display: inline-block;
      width: 45%;
      margin-right: 5%;
    }
    .confirmButton {
      display: inline-block;
      width: 45%;
    }
  }
}
</style>